<template>
  <div class="video-page">
    <div>
      <Breadcrumb
        style="margin-right: 20px;"
        @deleteOtherRoute="deleteOtherRouteMethods"
        ref="BreadcrumbRef"
      ></Breadcrumb>
    </div>

    <CommonTable
      class="commonTable"
      ref="applicationTableRef"
      :is-selection="true"
      :is-show-index="true"
      :is-has-opera="true"
      :t-column-data="desktopCol"
      :remote-api="getFileList"
      :query-params="searchObj"
      :is-reserve-select="true"
      @changeRow="changeRowMethods"
    >
      <template slot="media_name" slot-scope="scope">
        <!--文件夹-->
        <div
          class="file-name-row"
          :ref="`dragBlock${scope.$index}`"
          v-if="scope.row.file_type == '1'"
          :data-id="scope.row.id"
          @click="goToNextFold(scope.row)"
          @drop="(ev) => {dropNewHandler(ev, scope.row)}"
          @dragenter.prevent
          @dragover.prevent
        >
          <img src="./images/folder.png" class="file-icon" alt="">
          <span :data-id="scope.row.id" :class="scope.row.file_type == '1'?'fold-class': ''">
            {{scope.row.noSuffixMediaName}}
          </span>
        </div>

        <div
          class="file-name-row"
          :ref="`dragBlock${scope.$index}`"
          :draggable="true"
          :data-id="scope.row.id"
          v-else
          @dragstart="dragstartMethods(scope.row)"
          @click="goToNextFold(scope.row)"
        >
          <img src="./images/destop.png" class="file-icon" alt="">
          <span :data-id="scope.row.id">
            {{scope.row.desktop_name}}
          </span>
        </div>
      </template>
      <template slot="media_type" slot-scope="scope">
        {{scope.row.file_type == '1'? '文件夹': scope.row.media_type}}
      </template>
      <template slot="operate" slot-scope="scope" class="operate-btn">
        <el-button type="text" @click="editDesktop(scope.row)">编辑</el-button>
        <el-button type="text" @click="sendFile(scope.row)">启动推流</el-button>
        <el-button type="text" @click="sendFile(scope.row)">停止推流</el-button>
        <el-button v-if="$route.query.parentId && scope.row.file_type != 1" type="text" @click="moveToPrevParent(scope.row)">移动至根目录</el-button>

      </template>
    </CommonTable>


    <el-dialog
      title="电脑桌面"
      :visible.sync="isShowUploadDialog"
      width="35%"
      :before-close="handleClose"
    >
      <div>
        <el-form label-position="left" ref="form" :model="submitFileForm" label-width="140px">
          <el-form-item label="名称">
            <el-input v-model="submitFileForm.mediaName"></el-input>
          </el-form-item>
          <el-form-item label="路径">
            <el-input v-model="submitFileForm.location"></el-input>
          </el-form-item>
          <el-form-item label="关闭时要清理的进程">
            <el-input v-model="submitFileForm.cleanProcess"></el-input>
            <div>
              注意：添加的应用必须受控终端上提前安装。
            </div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirmSubmitFile">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="电脑桌面"
      :visible.sync="isShowEditDesktopDialog"
      width="35%"
      :before-close="handleClose"
    >
      <div>
        <el-form label-position="left" ref="form" :model="desktopForm" label-width="140px">
          <el-form-item label="名称">
            <el-input v-model="desktopForm.desktopName"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirmSubmitUpdateDesktop">确 定</el-button>
      </span>
    </el-dialog>

    <WarnPanelDialog
      :statusProp="statusIsDelFileProp"
      warn-content="是否删除文件"
      @confirmHandler="confirmDelMethods"
      @cancelHandler="cancelHandler"
    >
    </WarnPanelDialog>

    <WarnPanelDialog
      :statusProp="statusProp"
      :is-emit-close-methods="true"
      cancel-text="否"
      @closeHandler="closeHandlerMethods"
      @confirmHandler="confirmAllDelMethods"
      @cancelHandler="confirmDelOnlyHandler"
    ></WarnPanelDialog>

    <FileGroupManager
      :show="isShowGroup"
      @on-close="isShowGroup = false"
    ></FileGroupManager>

    <EditFileInfo
      :show="isShowEditFile"
      :mediaType="searchObj.mediaType"
      :edit-info-form="editForm"
      @on-close="isShowEditFile = false;getList()"
    ></EditFileInfo>

    <!--文件分发选择终端-->
    <TerListDialog
      ref="terListDialogRef"
      :show-ter-dialog="showTerDialog"
      @on-cancel="cancelTerDialog"
      @on-confirm="confirmSelectTer"
    ></TerListDialog>
  </div>
</template>

<script>
import Mixins from "@/views/distribute/mixins/mixins";
import CommonTable from "@/components/Table/commonTable";
import UploadDialog from "@/components/UploadFile/index"
import {applicationListCol} from "@/views/distribute/tableCol/applicationListCol";
import {videoListCol} from "@/views/distribute/tableCol/videoListCol";
import {desktopCol} from "@/views/distribute/tableCol/desktopCol"
import * as service from "@/views/distribute/service";
import {getDesktopList, saveDesktopList} from "@/views/distribute/service";

export default {
  name: "video",
  mixins: [Mixins],
  components: {
    CommonTable,
    UploadDialog
  },
  data() {
    return {
      desktopCol,
      isShowEditDesktopDialog: false,
      getFileList: service.getDesktopList,
      showTerDialog: false,
      isShowEditFile: false,
      isShowGroup: false,
      applicationListCol,
      isShowUploadDialog: false,
      searchObj: {
        audit: 1,
        parentId: 0,
        mediaType: 6,
        page: 1,
        pageSize: 20
      },
      desktopForm: {
        id: '',
        desktopName: '',
      },
      submitFileForm: {
        mediaName: '',
        mediaLink: '',
        location: '',
        cleanProcess: '',
        mediaType: 6,
        fileType: 2
      },
      videoListCol,
      total: 0,
      editForm: {
        mediaName: '',
        groupId: ''
      },
      mutiDelList: [],
      clickCache: {}
    }
  },
  mounted() {
    if(this.$route.query.parentId) {
      this.searchObj.parentId = this.$route.query.parentId
      this.getList()
    } else {
      this.searchObj.parentId = 0
      this.getList()
    }
  },
  watch: {
    "$route.query.parentId"(val) {
      if(val) {
        this.searchObj.parentId = val
        this.getList()
      } else {
        this.searchObj.parentId = 0
        this.getList()
      }
    }
  },
  methods: {
    editDesktop(row) {
      this.desktopForm.id = row.id
      this.desktopForm.desktopName = row.desktop_name
      this.isShowEditDesktopDialog = true
    },
    confirmSubmitUpdateDesktop() {
      const params = {
        ...this.desktopForm
      }
      service.saveDesktopList(params).then(() => {
        this.$message.success('修改成功')
        this.getList()
        this.isShowEditDesktopDialog = false
        this.desktopForm = {
          id: '',
          desktopName: ''
        }
      })

    },
    goToNextFold(row) {
      if(row.file_type == 1) {
        this.pushRouterHistory(row, 'desktopPicture')
        this.$refs.BreadcrumbRef.refreshMenu()
      } else {
        // window.open(row.media_link)
      }
    },
    changeRowMethods(row) {
      this.mutiDelList = [...row]
    },
    handleClose() {
      this.isShowUploadDialog = false
      this.isShowEditDesktopDialog = false
      this.desktopForm = {
        id: '',
        desktopName: ''
      }
      this.submitFileForm = {
        mediaName: '',
        mediaLink: '',
        location: '',
        cleanProcess: '',
        mediaType: 6,
        fileType: 2
      }
    },
    confirmSubmitFile() {
      const params = Object.assign({}, this.submitFileForm)
      service.saveFileContent(params).then(() => {
        this.$message.success('新增成功')
        this.getList()
        this.handleClose()
      })
    },
    editFile(row) {
      this.isShowEditFile = true
      this.editForm.id = row.id
      this.editForm.groupId = row.groupId || row.group_id
      this.editForm.mediaName = row.mediaName || row.media_name
      this.editForm.auditHistory = row.auditHistory
    },
    cancelTerDialog() {
      this.showTerDialog = false
    },
    goToGroupManager() {
      this.isShowGroup = true
    },
    addNewFold() {
      this.getList()
    },
    changeSearchMethods(msg) {
      this.searchObj = {
        ...this.searchObj,
        ...msg
      }
      this.getList()
    },
    startUploadFile() {
      this.isShowUploadDialog = true
    },
    closeUpload() {
      this.isShowUploadDialog = false
    },
    getList() {
      const params = Object.assign({}, this.searchObj)
      this.$refs.applicationTableRef.queryData(params)
    },
  }
}
</script>

<style scoped lang="scss">
  .video-page{
    padding: 15px;
    background: white;

    .terminal-search-title{

    }

    .commonTable{
      margin-top: 15px;
    }
  }
</style>
